<!DOCTYPE html>
<html>

<head>
  <title>首页</title>

  <%- include bootstrap %>
</head>

<body>
  <%- include("header",{title:"index"}) %>

  <div class="container container-fluid">
    <div class="row">
      <div class="col-sm-10 col-xs-10 col-sm-offset-1 col-xs-offset-1 cl banner">
        <div class="cl">
          <a href="/details?db_name=index&_id=<%- result[0]._id %>" class="col-sm-12 col-xs-12 banner_a">
            <img class="banner_img" src="<%- result[0].imgsrc %>" alt="">
            <h3 class="focus-title">
              <%- result[0].title %>
            </h3>
          </a>
        </div>
      </div>
    </div>
    <div class="row" style="margin-top: 50px;">
      <ul class="list-group col-sm-10 col-xs-10 col-sm-offset-1 col-xs-offset-1 newsList">
        <% result.map((item,index)=>{ %>
        <% if(index !==0 ){ %>
        <li class="list-group-item list-group-item-warning cl">
          <a href="/details?db_name=index&_id=<%- item._id %>" style="cursor: pointer;">
            <div class="col-sm-7 col-xs-7">
              <h3 class="h1" style="line-height: 50px;color:#333333;">
                <%- item.title %>
              </h3>
              <div>
                <span>
                  <%- item.ptime %>
                </span>
                <a style="margin-left: 15px;" href="/comments/comments?db_name=index&_id=<%- item._id %>">跟帖</a>
              </div>
            </div>
            <div class="col-sm-5 col-xs-5">
              <img src="<%- item.imgsrc %>" alt="" style="width: 100%;">
            </div>
          </a>
        </li>
        <% } %>
        <% }); %>
      </ul>
    </div>
    <div class="row">
      <div class="tip text-danger h3 bg-danger col-sm-10 col-xs-10 col-sm-offset-1 col-xs-offset-1" style="display: none;text-align: center;padding: 10px 0;">
        正在加载中。。。
      </div>
    </div>
  </div>
  <%- include("footer") %>
</body>

<script>
  var skip_key = 0;
  $(window).on("scroll", scrollHolder);
  function scrollHolder() {
    if ($(document.documentElement).scrollTop() === ($(document.documentElement).prop("scrollHeight") - $(document.documentElement).prop("clientHeight"))) {
      skip_key++;
      $.ajax({
        type: "get",
        url: "/index",
        data: {
          skip_key: skip_key * 10,
          db_name: "index"
        },
        dataType: "json",
        success: function (data) {
          if (data.length === 0) {
            $(".tip").html("没有了。。。");
            $(".tip").show();
            return;
          }
          $(".tip").show();
          var html = "";
          data.map((item) => {
            html += `
            <li class="list-group-item list-group-item-warning cl">
              <a href="/details?db_name=index&_id=${item._id}" style="cursor: pointer;">
                <div class="col-sm-7 col-xs-7">
                  <h3 class="h1" style="line-height: 50px;color:#333333;">
                    ${item.title}
              </h3>
                  <div>
                    <span>
                     ${item.ptime}
                </span>
                    <a style="margin-left: 15px;" href="/comments/comments?db_name=index&_id=${item._id}">跟帖</a>
                  </div>
                </div>
                <div class="col-sm-5 col-xs-5">
                  <img src="${item.imgsrc}" alt="" style="width: 100%;">
            </div>
          </a>
        </li>
            `;
          });
          $(".newsList").append(html);
          $(".tip").hide();
        }
      });
    }
  }


</script>

</html>